<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- {{message}} -->
    <!-- <xxx></xxx> -->
    <yyy></yyy>
    <!-- {{name}} -->
    <div @click="handleNumber">{{message}}</div>  
    <!-- <div v-for="item in nameArr" :key="item.id">{{ item.name }}</div> -->
    <!-- <div @click="handleNumber">我是按钮</div> -->
    <!-- <div>{{message}}</div> -->
    <!-- {{newA}} -->
    <!-- <yyy @click1="handleNumber" @cddd :msg="message"></yyy> -->
  </div>
  <script src="../dist/vue.js"></script>
  <script>

    // var twoSum = function (nums, target) {
    //     let map = new Map();
    //     let length = nums.length;
    //     for (let i = 0; i < length; i++) {
    //         let num = nums[i];
    //         let prevIndex = map[target - nums[i]];
    //         console.log(prevIndex, 'prevIndex')
    //         if (prevIndex !== undefined) {
    //             // console.log(map, 'map');
    //             return [prevIndex, i];
    //         }
    //         console.log(i, 'iii')
    //         map[num] = i;
    //     }
    //     return [-1, -1];
    // };
    // console.log(twoSum([2,7,11,15, 5, 4], 9), 'mapmap')
    // Vue.component('xxx', {
    //   inject: ['provideMsg'],
    //   template: "<div>90989{{provideMsg}}</div>"
    // })
    Vue.component('yyy', {
      // template: "<div @click="changeMsg">{{msg}}</div>",
      template: `<button @click="changeMsg">{{msg}}{{provideMsg}}</button>`,
      // props: ['msg'],
      inject: ['provideMsg'],
      data() {
        return {
          msg: '我是子组件'
        }
      },
      methods: {
        changeMsg() {
          console.log(this, 'ssss')
          this.msg = 1111
          this.provideMsg = '哈哈哈哈'
        }
      }
    })
    // Vue.component('my-component', {
    //   // 模板内容
    //   template: `<button @click="emitEvent">Click me</button>`,
    //   // 方法定义
    //   methods: {
    //     emitEvent() {
    //       // 触发一个名为'my-event'的事件
    //       this.$emit('my-event', 'Hello from my-component!');
    //     }
    //   }
    // });
    new Vue({
      // el: '#app',
      provide: {
        provideMsg: 'hello world'
      },
      data: {
        message: 'tesserwgt',
        name: '张三',
        // nameArr: [
        //   {
        //     id: 'zhangsan',
        //     name: '1'
        //   },
        //   {
        //     id: 'lisi',
        //     name: '2'
        //   },
        //   {
        //     id: 'wangwu',
        //     name: '3'
        //   },
        //   {
        //     id: 'zhaoliu',
        //     name: '4'
        //   },
        // ]
        // a: {
        //   m: {
        //     n: 5
        //   }
        // },
      },
      watch: {
        message(newVal, old) {
          console.log(newVal, old, 'message');
          return newVal
        }
      },
      computed: {
        newA() {
          return this.message + 'ahahaha'
        }
      },
      methods: {
        handleNumber() {
          // this.a.m.n = 10
          this.message = '我是测试'
          console.log(this, 'ssss')
          // this.nameArr = [
          //   {
          //     id: 'zhaoliu',
          //     name: '4'
          //   },
          //   {
          //     id: 'lisi',
          //     name: '2'
          //   },
          //   {
          //     id: 'wangwu',
          //     name: '3'
          //   },
          //   {
          //     id: 'zhangsan2',
          //     name: '11'
          //   },
          // ]
          // this.nameArr.push({
          //   id: 'zhaoliu',
          //   name: '4'
          // })
          // this.nameArr = [
          //   {
          //     id: 'hahaha',
          //     name: 'd'
          //   },
          // ]
        },
        method() {
          // console.log('loading....')
        }
      },
      // components:{
      //   yyy: {
      //     props: ['msg'],
      //     template: "<div>5555</div>"
      //   }
      // },
      beforeCreate() {
        this.$on('hook:beforeCreate', function() {
          // console.log('hook:beforeCreate')
          this.method()
        });
        console.log('beforeCreate');
      },
      created() {
       
        console.log('created');
      },
      beforeMount() {
        console.log('beforeMount');
      },
      mounted() {
        console.log('mounted');
        this.$nextTick(() => {
          console.log('nextTick1')
        })
        this.$nextTick(() => {
          console.log('nextTick2')
        })
        // console.log(this.a);
        // this.message = 'hhhhh'
      }
    }).$mount('#app')

    // class Observer {
    //   constructor(value) {
    //     this.vmCount = 1
    //     console.log(this, value, 'ssss')
    //   }
    // }
    // const obj = { a: 1 }
    // function defineReactive(obj, key, val) {
    //   // var value
    //   Object.defineProperty(obj, key, {
    //     enumerable: true,
    //     get: () => {
    //       console.log('获取 ')
    //       return val
    //     },
    //     set: (newVal) => {
    //       val = newVal
    //     }
    //   })
    // }
    // defineReactive(obj, 'a', obj.a)
    // obj.a = 2
    // console.log(obj.a, obj, 'objobj')
    // const person = {
    //   fullName: function (country, city) {
    //     console.log(country, city, 'country, city');
    //     return this.firstName + this.lastName + " " + country + " " + city
    //   }
    // }
    // const newPerson = {
    //   firstName: "fu",
    //   lastName: "chaoyang",
    // }
    // const data = person.fullName.call(newPerson, 'china', 'xian')
  </script>
</body>
</html>